<template>
	<view class="goods-detail">
		<swiper indicator-dots>
			<swiper-item v-for="(item, index) in swipers" :key="item.id">
				<image :src="item.src"></image>
			</swiper-item>
		</swiper>
		<view class="box1">
			<view class="price">
				<text>￥6788</text>
				<text>￥8788</text>
			</view>
			<view class="goods-name">华为nova3</view>
		</view>
		<view class="line"></view>
		<view class="box2">
			<view><text>货号：</text>5454545445</view>
			<view><text>库存：</text>200</view>
		</view>
		<view class="box3">
			<view class="title">详情介绍</view>
			<view class="content">内容</view>
		</view>
	</view>
</template>

<script>
	import { reqGoodsSwipers } from '@/api'
	export default {
		data() {
			return {
				id: '',
				swipers: []
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getSwipers(this.id)
		},
		methods: {
			async getSwipers(id) {
				const result = await reqGoodsSwipers(id)
				if(result.code === 200) {
					this.swipers = result.data
				} else {
					uni.showToast({
						title:'获取数据失败！'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.goods-detail {
		swiper {
			height: 700rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.box1 {
		padding: 15rpx;
		.price {
			font-size: 35rpx;
			color: $shop-color;
			line-height: 80rpx;
			text:nth-child(2) {
				color: #ccc;
				font-size: 28rpx;
				text-decoration: line-through;
				margin-left: 20rpx;
			}
		}
		.goods-name {
			font-size: 32rpx;
			line-height: 60rpx;
			font-weight: bold;
		}
	}
	.box2 {
		padding: 0 15rpx;
		font-size: 30rpx;
		line-height: 70rpx;
		text {
			font-weight: bold;
		}
	}
	.box3 {
		.title {
			font-size: 30rpx;
			padding-left: 15rpx;
			border-bottom: 1px solid #eee;
			line-height: 70rpx;
			font-weight: bold;
		}
		.content {
			padding: 15rpx;
			font-size: 28rpx;
		}
	}
</style>
